﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1, minimum-scale=1.5, maximum-scale=1.5, user-scalable=no"/>
    <title>远程教育考试平台_在线考试</title>
    <link href="${pageContext.request.contextPath}/static/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/static/css/test.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        .qu {

        }
    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <c:if test="${showAnsw!=1}">
                        <div class="test_title">
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
                            </p>
                            <font><input type="button" name="test_jiaojuan" value="交卷" onclick="onSubmit()"></font>
                        </div>
                    </c:if>
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                            <c:if test="${showAnsw!=1}">
                                <p>
                                    <span>共</span><i
                                        class="content_lit">${course.count}</i><span>题，</span><span>合计</span><i
                                        class="content_fs">${course.totalScore}</i><span>分</span>
                                </p>
                            </c:if>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul id="ul_content">
                            <c:if test="${!empty list}">
                                <c:forEach var="choice" items="${list}" varStatus="i">
                                    <c:if test="${!empty choice}">
                                        <li class="qu" id="qu_${i.index+1}" courseId="${course.id}"
                                            choicesId="${choice.id}">
                                            <div class="test_content_nr_tt">
                                                <i>${i.index+1}</i><span>(${course.score}分)</span><font>${choice.info}（
                                                <c:if test="${showAnsw==1 && show}">
                                                    ${choice.answ}
                                                </c:if>
                                                ）</font>
                                                <c:if test="${showAnsw==1}">
                                                    <button type="button" class="layui-btn" info="${choice.analyze}"
                                                            onclick="onAnalyze(this)">分析
                                                    </button>
                                                </c:if>

                                                <c:choose>
                                                    <c:when test="${showAnsw==1}">

                                                        <b class="icon iconfont" courseId="${course.id}"
                                                           liid="qu_${i.index+1}"
                                                           choicesId="${choice.id}" onclick="onCollect(this)">
                                                            收藏
                                                        </b>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <b class="icon iconfont">
                                                            &#xe881;
                                                        </b>
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>

                                            <div class="test_content_nr_main">
                                                <ul>

                                                    <li class="option">

                                                        <input type="radio" class="radioOrCheck"
                                                               name="answer_${i.index+1}"
                                                               id="option_${i.index+1}_a" value="1"
                                                        />

                                                        <label for="option_${i.index+1}_a">
                                                            A.
                                                            <p class="ue" style="display: inline;">${choice.a}</p>
                                                        </label>
                                                    </li>

                                                    <li class="option">

                                                        <input type="radio" class="radioOrCheck"
                                                               name="answer_${i.index+1}"
                                                               id="option_${i.index+1}_b" value="2"
                                                        />


                                                        <label for="option_${i.index+1}_b">
                                                            B.
                                                            <p class="ue" style="display: inline;">${choice.b}</p>
                                                        </label>
                                                    </li>
                                                    <c:if test="${!empty choice.c}">
                                                        <li class="option">

                                                            <input type="radio" class="radioOrCheck"
                                                                   name="answer_${i.index+1}"
                                                                   id="option_${i.index+1}_c" value="3"
                                                            />


                                                            <label for="option_${i.index+1}_c">
                                                                C.
                                                                <p class="ue" style="display: inline;">${choice.c}</p>
                                                            </label>
                                                        </li>
                                                    </c:if>

                                                    <c:if test="${!empty choice.d}">
                                                        <li class="option">

                                                            <input type="radio" class="radioOrCheck"
                                                                   name="answer_${i.index+1}"
                                                                   id="option_${i.index+1}_d" value="4"
                                                            />


                                                            <label for="option_${i.index+1}_d">
                                                                D.
                                                                <p class="ue" style="display: inline;">${choice.d}</p>
                                                            </label>
                                                        </li>
                                                    </c:if>
                                                </ul>
                                            </div>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </ul>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="${pageContext.request.contextPath}/static/js/time/jquery.countdown.js"></script>

<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>


    var layer;
    //JavaScript代码区域
    layui.use(['element', 'layer'], function () {
        element = layui.element;
        layer = layui.layer;
        element.init();
    });

    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });

    /*提交答案*/
    function onSubmit() {

        var data = [];
        $(".qu").each(function (i) {
            var answ = $(this).find("input[type='radio']:checked").val();
            var courseId = $(this).attr("courseId");
            var choicesId = $(this).attr("choicesId");
            data.push({userName:  ${userName}, courseId: courseId, choicesId: choicesId, answ: answ});
        });
        //开始计算分数
        var answer =${answers};
        var fenshu = 0;
        var errors = [];
        $.each(data, function (i) {
            if (this.answ == answer[i]) {
                fenshu += 2;
            } else {
                errors.push(this);
            }
        });
        layer.confirm('您的成绩为：' + fenshu, {
            btn: ['知道了'] //按钮
        }, function (index) {
            layer.close(index);
            if (errors.length != 0)
                postError(errors);
        });
    }

    /*题目分析*/
    function onAnalyze(e) {
        //示范一个公告层
        parent.layer.open({
            type: 1
            ,
            title: false //不显示标题栏
            ,
            closeBtn: false
            ,
            area: '300px;'
            ,
            shade: 0.8
            ,
            id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,
            btn: ['关闭']
            ,
            btnAlign: 'c'
            ,
            moveType: 1 //拖拽模式，0或者1
            ,
            content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' + e.getAttribute("info") + '</div>'
            ,
            success: function (layero) {
            }
        });
    }

    /*收藏*/
    function onCollect(e) {
        var collect = {
            userName:${userName},
            courseId: e.getAttribute("courseId"),
            choicesId: e.getAttribute("choicesId"),
            answ: getChooseData(e.getAttribute("liid"))
        }
        postCollect(collect);
    }

    function getChooseData(id) {
        var answ = $("#" + id).find("input[type='radio']:checked").val();
        if (answ == 1) {
            return "A";
        } else if (answ == 2) {
            return "B";
        } else if (answ == 3) {
            return "C";
        } else if (answ == 4) {
            return "D";
        } else {
            return answ;
        }

    }
    /**
     * 发送网络请求
     * @param data
     */
    function postCollect(data) {
        $.ajax(
            {
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                url: '${pageContext.request.contextPath}/collect/add',
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (data) {
                    alert(data.message);
                }
            });
    }

    /**
     * 发送网络请求
     * @param data
     */
    function postError(data) {
        $.ajax(
            {
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                url: '${pageContext.request.contextPath}/error/add',
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (data) {
                    alert("错题集" + data.message);
                }
            });
    }


</script>


</body>

</html>